<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格隔行变色</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    table {
        border: 1px solid #333;
        border-collapse: collapse;
        margin: 0 auto;
    }

    table td,
    table th {
        border: 1px solid #333;
        padding: 10px 20px;
    }

    .yanse {
        background-color: red;
        color: #fff;
    }

    .huise {
        background-color: #ccc;
        color: red;
    }
</style>

<body>
    <table>
        <thead>
            <tr>
                <th>天</th>
                <th>下</th>
                <th>第</th>
                <th>一</th>
                <th>笔</th>
                <th>墨</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>
</body>
<!-- <script>
    var trs = document.querySelectorAll('tbody>tr')

    for (var i = 0; i < trs.length; i++) {

        trs[i].onmousemove = function () {          // 鼠标经过
            // this.style.background = 'red'
            // this.style.color = '#fff'
            for (var j = 0; j < trs.length; j++) {
                trs[j].setAttribute('class', '');
                trs[j].setAttribute('index', j);  //  打标记   
            }

            var idx = this.getAttribute('index')   // 获取标记
            console.log(idx);
            if (idx % 2 == 0) {          //  判断 奇偶 行
                this.setAttribute('class', 'yanse');
            } else {
                this.setAttribute('class', 'huise');
            }


        }

    }

</script> -->

<!-- ###############    上课   
33333333333333333############################################################ -->
<script>
    //1.
   var trs= document.querySelectorAll('tbody>tr');
   for(var i=0;i<trs.length;i++){
    // 设颜色
         if(i%2==0){
            trs[i].style.backgroundColor='pink';
         }else{
            trs[i].style.backgroundColor='#cccc';
         }
        //  加事件
          var bgc;//全局   
        trs[i].onmouseover=function(){    // 鼠标移入
             // 经过时先记下当前行的颜色
             bgc=getComputedStyle(this,null).backgroundColor
            this.style.backgroundColor='yellow';
           
        }
        trs[i].onmouseout=function(){     // 鼠标移出
            this.style.backgroundColor=bgc;
        }
   }


</script>

</html>